<template>
    <div>
        <div class="content">
            <div class="introduce">
                <div class="canteenName"> {{ selectInfo.ming_cheng }}</div>
                <div class="title"><span></span> 餐厅介绍</div>
                <span>{{ selectInfo?.gai_kuo?.jie_shao }}</span>
                <div class="title"><span></span> 本店特色美食</div>
                <span>{{ selectInfo?.gai_kuo?.mei_shi || selectInfo?.gai_kuo?.meih_shi }}</span>

                <div class="map">
                    <div class="title">
                        <SvgIcon name="map" width="35" height="35" /> <i>地图</i>
                    </div>
                    注：地图位置标注仅供参考，具体情况以实际道路标实信息为准。
                    <div class="site">
                        <!-- 地图组件 -->
                        <MapSite :site="selectInfo.wei_zhi" />
                    </div>
                </div>
            </div>
            <div class="nearby">
                <div class="deliciousfood">
                    <div class="title">附近美食</div>
                    <div class="scenic">
                        <div class="item" v-for="i in foodInfo" :key="i.bian_hao" @click="getFoodsInfo(i.bian_hao)">
                            <div class="left">
                                <img :src="i.tu_pian[1]" alt="">
                            </div>
                            <div class="right">
                                <div class="name">{{ i.ming_cheng }}</div>
                                <div class="score">{{ i.ping_fen }} <span>/ 5分</span> </div>
                                <div class="site">地址：{{ i.xing_xi.di_zhi }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import { onMounted, ref } from 'vue';

import { useScenicStore } from '@/stores/modules/scenic';
const scenicStore = useScenicStore()

import { useFoodsStore } from '@/stores/modules/foods';
const foodsStore = useFoodsStore()

import { useRoute } from 'vue-router';
let $route = useRoute()

// 引入地图组件
// @ts-ignore
import MapSite from './map/index.vue'

let foodInfo = ref<any>([])
const selectInfo = ref<any>([])
const setFoodInfo = (data: any, id: string) => {
    let index = Math.floor(Math.random() * 10 + 1) + 20
    foodInfo.value = data.slice(index, index + 3)
    selectInfo.value = data.filter((i: any) => i.bian_hao == id)[0]
}

const getFoodsInfo = async (id: string) => {
    let data = (await foodsStore.getFoods()).data
    setFoodInfo(data, id)
}

onMounted(() => {
    getFoodsInfo($route.params.id as any)
})
</script>

<style scoped lang="scss">
.content {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    margin-top: 20px;
    min-width: 1000px;

    .introduce {
        background-color: #fff;
        width: 70%;

        .canteenName {
            font-weight: 600;
            font-size: 25px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #0086f6;
        }

        .title {
            font-weight: 600;
            font-size: 25px;
            margin-bottom: 10px;
            display: flex;

            span {
                display: block;
                width: 3px;
                height: 35px;
                background-color: #0086f6;
                margin-right: 10px;
            }
        }

        span {
            display: block;
            margin-bottom: 20px;
            font-size: 16px;
        }

        .map {

            .title {
                color: #0086f6;

                i {
                    margin-left: 10px;
                }
            }

            .site {
                width: 100%;
                height: 500px;
            }
        }
    }

    .nearby {
        width: 28%;

        .deliciousfood {
            background-color: #fff;
            margin-bottom: 30px;

            .title {
                font-weight: 500;
                font-size: 18px;
                padding: 10px;
            }

            .scenic {
                width: 100%;

                .item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding: 10px;
                    height: 100px;


                    .left {
                        width: 34%;
                        height: 100%;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .right {
                        width: 64%;
                        padding: 5px 0;
                        font-weight: 300;

                        .name {
                            font-size: 16px;
                            overflow: hidden;
                            text-wrap: nowrap;
                            text-overflow: ellipsis;
                        }

                        .score {
                            font-size: 14px;
                            margin: 8px 0;
                            overflow: hidden;
                            text-wrap: nowrap;
                            text-overflow: ellipsis;

                            span {
                                color: red;
                                font-size: 16px;
                            }
                        }

                        .site {
                            font-size: 14px;
                            overflow: hidden;
                            text-wrap: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
}
</style>